<template>
	<image src="/static/images/editWithdraw-bg.png" mode="widthFix" class="bg-img"></image>
	<u-gap height="120"></u-gap>
	<u-form :model="formData" ref="formRef" :label-width="150" :errorType="['toast']">
		<view class="u-p-l-28 u-p-r-28 u-rela">
			<view class="bgw box-radius u-p-24" @click="popupShow = true">
				<view class="u-flex">
					<view class="u-flex-1">
						提现方式
					</view>
					<view v-if="!payType">
						<u-icon label-pos="left" name="arrow-right" label-color="#BBBBBB" color="#BBBBBB"
							label-size="24" size="24" label="请选择提现方式"></u-icon>
					</view>
					<view v-if="payType == 'zfb'" class="u-flex">
						<image src="/static/images/icon-zfb.png" mode="aspectFit" class="icon-image u-p-r-10"></image>
						<u-icon label-pos="left" name="arrow-right" label-color="#666666" color="#666666"
							label-size="24" size="24" label="支付宝"></u-icon>
					</view>
					<view v-if="payType == 'card'" class="u-flex">
						<image src="/static/images/icon-card.png" mode="aspectFit" class="icon-image u-p-r-10"></image>
						<u-icon label-pos="left" name="arrow-right" label-color="#666666" color="#666666"
							label-size="24" size="24" label="银行卡"></u-icon>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="bgw box-radius u-p-t-24 u-p-l-24 u-p-r-24">
				<view>
					<text class="u-font-32">佣金提现</text>
					<text class="u-font-24 u-tips-color u-p-l-20">提现需收取{{config['tx_premium']}}％手续费：</text>
					<text v-if="serviceCharge" class="color-red">￥{{serviceCharge}}</text>
				</view>
				<u-form-item label="" prop="total">
					<view class="u-flex" style="width: 100%;align-items: flex-end;">
						<view class="u-font-28" style="height: 60upx;line-height: 60upx;">
							￥
						</view>
						<view class="u-flex-1">
							<u-input :custom-style="{'font-size':'36upx'}" v-model="formData.total"
								placeholder="请输入数字" type="digit" :clearable="false" />
						</view>
					</view>
				</u-form-item>
				<view class="u-flex">
					<view class="u-flex-1 u-font-24">
						<text class="u-tips-color">佣金可提总额：</text>
						<text class="color-green">￥{{userInfo.balance.dominate}}</text>
					</view>
					<view class="u-p-t-24 u-p-l-24 u-p-b-24">
						<u-icon label-pos="left" name="arrow-right" label-color="#BBBBBB" color="#BBBBBB"
							label-size="24" size="24" label="提现记录"
							@click="navLogin('/pagesSub/withdrawList/withdrawList')"></u-icon>
					</view>
				</view>
			</view>
			<u-gap height="20"></u-gap>
			<view class="bgw box-radius u-p-t-24 u-p-l-24 u-p-r-24 u-m-b-20" v-if="payType == 'zfb'">
				<view class="u-font-32">
					提现账号
				</view>
				<u-form-item label="支付宝账号" prop="account" :border-bottom="true">
					<u-input v-model="formData.account" placeholder="请输入支付宝账号" type="text" />
				</u-form-item>
				<u-form-item label="真实姓名" prop="name" :border-bottom="false">
					<u-input v-model="formData.name" placeholder="请输入真实姓名" type="text" />
				</u-form-item>
			</view>
			<view class="bgw box-radius u-p-t-24 u-p-l-24 u-p-r-24 u-m-b-20" v-if="payType == 'card'">
				<view class="u-font-32">
					提现账号
				</view>
				<u-form-item label="银行卡号" prop="account" :border-bottom="true">
					<u-input v-model="formData.account" placeholder="请输入银行卡号" type="number" />
				</u-form-item>
				<u-form-item label="真实姓名" prop="name" :border-bottom="true">
					<u-input v-model="formData.name" placeholder="请输入真实姓名" type="text" />
				</u-form-item>
				<u-form-item label="开户行" prop="bank" :border-bottom="false">
					<u-input v-model="formData.bank" placeholder="请输入开户行" type="text" />
				</u-form-item>
			</view>
			<view class="">
				<u-checkbox-group>
					<u-checkbox v-model="agreeFlag" name="agree" shape="circle" active-color="#117B12">
						<view class="u-font-24">
							我已阅读并同意
							<text class="color-primary" @tap.stop="toArticle(6)">《提现协议》</text>
						</view>
					</u-checkbox>
				</u-checkbox-group>
			</view>
		</view>
	</u-form>

	<u-gap height="20"></u-gap>
	<view class="u-p-48">
		<u-button :loading="loading" @click="submit" type="primary" shape="circle">立即提现</u-button>
	</view>
	<u-popup v-model="popupShow" mode="center" border-radius="14">
		<view style="width: 500upx;">
			<view class="u-flex u-p-20" @click="popupPayType = 'zfb'">
				<image src="/static/images/icon-zfb.png" mode="aspectFit" class="payTypeIcon"></image>
				<view class="u-flex-1 u-p-l-20">
					支付宝
				</view>
				<u-icon name="checkmark-circle-fill" color="#117B12" size="36" v-if="popupPayType == 'zfb'"></u-icon>
			</view>
			<u-line color="#F6F6F6" />
			<view class="u-flex u-p-20" @click="popupPayType = 'card'">
				<image src="/static/images/icon-card.png" mode="aspectFit" class="payTypeIcon"></image>
				<view class="u-flex-1 u-p-l-20">
					银行卡
				</view>
				<u-icon name="checkmark-circle-fill" color="#117B12" size="36" v-if="popupPayType == 'card'"></u-icon>
			</view>
			<view class="u-p-20">
				<u-button @click="submitPopup" type="primary" shape="circle">确定</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import store from '@/store/index.js'; //需要引入store
	import mixins from '@/common/js/mixins.js';
	import {
		ref,
		reactive,
		computed,
		getCurrentInstance,
		watch
	} from 'vue'
	import {
		onReady,
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const {
		proxy,
	} = getCurrentInstance()
	const {
		baseImgUrl
	} = proxy
	const {
		nav,
		navLogin,
		modal,
		toastNavBack
	} = proxy.$util;
	const userInfo = computed(() => store.state.$userInfo)
	const isLogin = computed(() => {
		return store.getters.get_isLogin
	})
	const agreeFlag = ref(true)
	const payType = ref('') // zfb  card
	const formRef = ref();
	const formData = reactive({
		account: '',
		actually: '',
		bank: '',
		name: '',
		serviceCharge: '',
		status: '',
		total: '',
		type: '',
	})
	const serviceRatio = ref(0)
	const serviceCharge = computed(() => {
		try {
			let num = formData.total * serviceRatio.value;
			return Number(num.toFixed(2)) || '';
		} catch (e) {
			return ''
		}
	})
	const formRules = {
		total: [{
			required: true,
			message: '请输入提现金额',
			trigger: 'blur,change'
		}, {
			validator: (rule, value, callback) => {
				if (!uni.$u.test.amount(value)) {
					return false
				} else {
					return true
				}
			},
			message: '请输入正确的提现金额，最多两位小数',
			trigger: 'change, blur',
		}],
		name: [{
			required: true,
			message: '请输入真实姓名',
			trigger: 'blur,change'
		}],
		account: [{
			required: true,
			message: '请输入账号',
			trigger: 'blur,change'
		}],
	};
	const popupShow = ref(false)
	const popupPayType = ref('')
	const submitPopup = () => {
		payType.value = popupPayType.value;
		popupShow.value = false;
	}
	watch(popupShow, (v) => {
		if (v) {
			popupPayType.value = payType.value
		}
	})
	watch(payType, (v) => {
		formData.account = '';
		formData.bank = '';
		formData.name = '';
	})
	const toArticle = (type) => {
		nav('/pagesSub/articleDetail/articleDetail?type=' + type)
	}
	const loading = ref(false);
	const submit = (e) => {
		if (!payType.value) {
			uni.$u.toast('请选择提现方式');
			return false;
		}
		formRef.value.validate(async valid => {
			if (valid) {
				let _data = JSON.parse(JSON.stringify(formData));
				_data.serviceCharge = serviceCharge.value;
				_data.total = Number(_data.total);
				_data.type = payType.value == 'zfb' ? 0 : payType.value == 'card' ? 1 : '';
				let actually = _data.total - _data.serviceCharge;
				_data.actually = Number(actually.toFixed(2));
				uni.showLoading({
					title: '提交中',
					mask: true
				});
				loading.value = true;
				try {
					let res;
					res = await proxy.$u.api.withdrawal(_data);
					let {
						// data,
						code,
						msg
					} = res;
					if (code == 200) {
						uni.$emit('finance_update')
						toastNavBack('成功')
					} else {
						uni.$u.toast(msg || '错误');
					}
					loading.value = false
				} catch (err) {
					loading.value = false
					uni.$u.toast('错误');
				}
			} else {
				console.log('验证失败');
			}
		});
	}
	const config = reactive({
		'tx_premium':0 //提现手续费
	})
	const getData = () => {
		uni.showLoading({
			title: '加载中'
		});
		proxy.$u.api.getCommissionConfigs(2).then(res => {
			// console.log(res);
			let {
				code,
				msg,
				data
			} = res;
			if (code != 200) {
				uni.$u.toast(msg || '错误');
				return;
			}
			data.forEach(v=>{
				if(v.configKey === 'tx_premium'){
					v.configValue = Number(v.configValue)||0
				}
				config[v.configKey] = v.configValue
			})
			if(config['tx_premium']){
				try{
					serviceRatio.value = config['tx_premium']/100
				}catch(e){
					serviceRatio.value = 0
				}
				
			}
		}).catch(res => {
	
		})
	}
	onReady(() => {
		formRef.value.setRules(formRules);

	})
	onLoad((d) => {
		getData();

	})
	onShow(() => {

	})
</script>
<style lang="scss" scoped>
	.bg-img {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		display: block;
		width: 100%;
	}

	.payTypeIcon {
		width: 44upx;
		height: 44upx;
	}
</style>